<script setup>
import {defineProps,ref,watch,onMounted} from "vue";
import UserViewFavorites from "@/views/UserView/Components/UserViewFavorites.vue";
import VideoCard from "@/views/index/components/VideoCard.vue";
import {favoriteApi} from "@/apis/favoriteApi.js";
import {useRoute} from "vue-router";
import HorizonVideoCard from "@/components/horizonVideoCard/horizonVideoCard.vue";
const props = defineProps({
  modelValue:{
    type:Boolean,
    required:true,
  }
})
const emit = defineEmits(['update:modelValue']);
// 更新值的方法
const updateValue = (flag) => {
  emit('update:modelValue', flag);
};

const route = useRoute();

const params = route.params;

const fav_index = ref('1');
// const favorite = ref([]);

const favorites = ref([
  {
    name: "收藏夹1",
    videos: [
      {
        fvid: 1,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
    ]
  },
  {
    name: "收藏夹2",
    videos: [
      {
        fvid: 2,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
      {
        fvid: 3,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
      {
        fvid: 4,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
      {
        fvid: 5,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
      {
        fvid: 6,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
      {
        fvid: 7,
        user_id: 2,
        url: "536e1e82-2778-4678-bd0c-f4bda54b8561.mp4",
        view_count: 0,
        upload_time: "Feb 6, 2025, 2:25:52 PM",
        like_count: 0,
        favorite_count: 0,
        comment_count: 0,
        share_count: 0,
        is_deleted: false,
        videoSection: "科技",
        type: "自制",
        videoTitle: "测试视频111",
        videoIntro: "测试哦111",
        videoCover: "http://image.fengfengzhidao.com/gvb_1009/20231123092743__1123-i.png",
        videoTags: "测试,科技"
      },
    ]
  }
]);

const fetchFavorites = async () => {
  const res = await favoriteApi.getCategoryList(params.userid)
  console.log('收藏夹',res);
  // favorite.value = res.data.favorites;
}

// 控制收藏夹
const selectedFavorite = ref(favorites.value[0]);
function selectFavorite(key, keyPath) {
  fav_index.value = `${key}`
  selectedFavorite.value = favorites.value[key]
  console.log(selectedFavorite.value)
}
onMounted(()=>{
  fetchFavorites();
});
</script>

<template>
  <div class="favorites-dropdown" :class="{ 'dropdown-visible': props.modelValue}"
       @mouseenter="updateValue(true)"
       @mouseleave="updateValue(false)"
  >
  </div>
</template>

<style scoped lang="less">
.favorites-dropdown{
  position: absolute;
  top: calc(100% + 10px) ;
  right: -150%;
  width: 400%;
  height: 300px;
  background-color: #fff;
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  overflow: hidden;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;

}
.dropdown-visible{
  visibility: visible;
  opacity: 100;
}
</style>
